import React, {Component} from 'react'
import {View, Text, StyleSheet, ActivityIndicator, ScrollView} from 'react-native'
import {GetNofiticationApi} from '../../config/api'
import Enumeration from '../../config/enumeration'
import HeadingLine from '../common/heading_line'
import AttachmentManager from '../common/attachment_manager'
import ContentLine from '../common/content_line'
import {connect} from 'react-redux'
import styles from '../../config/styles'
import LoadingCommon from '../common/loading_common'

class NotificationShow extends Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            id: props.navigation.state.params.id,
            studentid: props.user.user.id,         
            notification: {},
        }
    }

    componentDidMount () {
        this.get_notification()
    }

    get_notification = () => {
        let _studentid = this.props.user.user.role == Enumeration.User.Role.Teacher ? null : this.state.id
        GetNofiticationApi(this.state.id, _studentid).then((data) => {
            if (data.code === 0) {
                this.state.notification = data.notification
                this.setState({loading: false})
            }
        })
    }

    render () {
        if (this.state.loading) {
            return ( <LoadingCommon />)
        } else {
            const notification = this.state.notification
            return (
                <ScrollView style={styles.scroll_view_container}>
                    <HeadingLine title={'通知'} color={'#00BBFF'} style={{backgroundColor: 'white'}} contentStyle={{backgroundColor: 'white'}}>
                        <ContentLine name={'标题:'} content={notification.title} />
                        <ContentLine name={'内容:'} content={notification.description} />
                        <ContentLine name={'附件:'} />
                        <View style={{flexDirection: 'row'}}>
                            <AttachmentManager 
                                attachments={notification.attachments} 
                                navigation={this.props.navigation} 
                            />
                        </View>
                        <ContentLine name={'截止时间:'} content={'无'} />
                    </HeadingLine>
                </ScrollView>
            )
        }
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.user
    }
}

export default connect(mapStateToProps)(NotificationShow)